<template>
	<view class="container">
		<view class="image"></view>
		<view class="content">
			<view class="searchm">
				<input class="search" placeholder="输入需要搜索的内容" placeholder-style="fonSize:50rpx" />
				<!-- #ifdef H5 -->
				<img class="rin" src="/static/zzm/搜索@3x.png" />

				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<image class="rin" :src="ss"></image>
				<!-- #endif -->
			</view>
			<view class="cardcontent">
				<view class="card" v-for="(item,index) in datalog" :key="index">
					<span class="title">{{ item.title }}</span>
					<view class="hengxian"></view>
					<span class="cardit">下单用户:{{ item.orderuser }}</span>
					<span class="cardit">实付金额:￥&nbsp;{{ item.money }}</span>
					<span class="cardit time">核销时间:{{ item.time }}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
let ss=ref('/static/zzm/搜索@3x.png');
let datalog = ref([
	{
		title: '普通洗车',
		orderuser: 'sss',
		money: 25,
		time: '2025-2-5 55:55:66'
	},
	{
		title: '普通洗车',
		orderuser: 'ccc',
		money: 25,
		time: '2025-2-5 55:55:66'
	},
	{
		title: '普通洗车',
		orderuser: 'bbb',
		money: 25,
		time: '2025-2-5 55:55:66'
	},
	{
		title: '普通洗车',
		orderuser: 'aaa',
		money: 25,
		time: '2025-2-5 55:55:66'
	}
]);
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: nowrap;
	// background-color: #ffffff00;
	// background-image: url('/static/hxjlbjt.png');
	// background-repeat: no-repeat;
	// background-size: 100%;
	// background-position: 0 0;
	// bckground-color: #f7f7f7;
}

.image {
	height: 30%;
	width: 100%;
	background-color: #3b73f4;
}
.content {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.searchm {
	margin-top: 25%;
	height: 5%;
	width: 100%;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50rpx;
}
.search {
	height: 100%;
	width: 85%;
}
.rin {
	height: 40%;
	width: 6%;
	margin-right: 6%;
}
.cardcontent {
	margin-top: 10%;
	height: 90%;
	width: 100%;
	overflow: auto;
	/* 隐藏滚动条（适用于 Chrome、Safari 和 Opera） */
	-ms-overflow-style: none; /* IE 和 Edge */
	scrollbar-width: none; /* Firefox */
}
.card {
	margin-bottom: 5%;
	padding: 0 5%;

	height: 25%;
	width: 90%;
	background-color: white;
	border-radius: 50rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	.title {
		font-size: 40rpx;
		margin-top: 2%;
	}
	.hengxian {
		height: 1% !important;
		width: 98%;
		background-color: #b8b8b850;
		margin: 0 auto;
		margin-top: 4%;
	}
	.cardit {
		margin-top: 4%;
	}
	.time {
		opacity: 0.5;
		font-size: 30rpx;
	}
}
</style>
